<template>
  <div id="app" class="app-page">
    <root>
      <safe-header
        v-bind="{
          title: '波次复核',
          isBack: true,
          backIconColor: '#fff',
          fixedTop: true,
        }"
      />
      <div id="OutboundReview2">
        <v-container class="py-6 px-2">
          <v-row class="mt-2">
            <v-col :cols="12" pb-0>
              <v-text-field
                :prepend-inner-icon="mdiCreditCardScan"
                v-model="boxCode"
                solo
                autofocus
                clearable
                hide-details
                placeholder="请扫描波次号"
                @keydown.13="boxCodeSearch"
                style="font-size: 14px"
              ></v-text-field>
            </v-col>
          </v-row>
        </v-container>
        <v-container white class="pa-2 OutboundReview_bottom">
          <v-row>
            <v-col cols="12" class="d-flex align-center"
              ><span class="card-title">复核列表:</span
              ><span class="card-title ml-2">{{ pickTaskList.length }}条</span>
            </v-col>
          </v-row>
          <v-divider class="mb-2"></v-divider>
          <div v-if="pickTaskList[0]">
            <v-container
              v-for="(item, index) in pickTaskList"
              :key="index"
              class="px-1"
            >
              <v-row>
                <v-col cols="12" class="pa-0 pb-2">
                  <v-card outlined style="background-color: #f2f3f5">
                    <v-card-subtitle class="list_content pa-1">
                      <v-row>
                        <v-col
                          cols="2"
                          class="pr-2 d-flex justify-center align-center"
                        >
                          <v-row>
                            <v-col
                              class="pr-2 d-flex justify-center align-center"
                            >
                              <span>{{ index + 1 }}</span>
                            </v-col>
                          </v-row>
                          <v-divider vertical></v-divider>
                        </v-col>

                        <v-col cols="10">
                          <v-row
                            class="
                              d-flex
                              flex-row
                              justify-space-between
                              wms-v-row
                            "
                          >
                            <v-col cols="12" class="card-lable">{{
                              item.boxCode
                            }}</v-col>
                          </v-row>
                          <v-row
                            class="
                              d-flex
                              flex-row
                              justify-space-between
                              wms-v-row
                            "
                          >
                            <v-col cols="12" class="card-lable">{{
                              item.itemName
                            }}</v-col>
                          </v-row>
                          <v-row
                            class="
                              pa-0
                              d-flex
                              flex-row
                              justify-space-between
                              wms-v-row
                            "
                          >
                            <v-col cols="8" class="card-lable">{{
                              item.itemCode
                            }}</v-col>
                            <v-col class="card-value">数量：{{
                              item.pickQuantity
                            }}</v-col>
                          </v-row>
                        </v-col>
                      </v-row>
                    </v-card-subtitle>
                  </v-card>
                </v-col>
              </v-row>
            </v-container>
          </div>
          <v-row v-else>
            <v-col cols="12" class="text-center">暂无数据</v-col>
          </v-row>
        </v-container>
        <div v-show="hidshow" class="footer">
          <v-bottom-navigation
            height="60"
            style="background: transparent; box-shadow: none"
          >
            <v-row
              class="pa-0 ma-0 justify-center"
              style="background: transparent"
            >
              <v-col
                cols="12"
                class="
                  pa-0
                  ma-0
                  d-flex
                  justify-center
                  align-center
                  mb-2
                  px-2
                  py-1
                "
                style="background: transparent"
              >
                <v-btn
                  class="wms-submit-btn"
                  dark
                  block
                  color="#193690"
                  style="
                    height: 100%;
                    border-radius: 10px;
                    color: #fff !important;
                  "
                  @click="OutboundSubmit"
                  >提交</v-btn
                >
              </v-col>
            </v-row>
          </v-bottom-navigation>
        </div>
      </div>
    </root>
    <v-overlay :value="overlay">
      <v-progress-circular indeterminate size="64"></v-progress-circular>
    </v-overlay>
  </div>
</template>

<script>
import SafeHeader from "../../components/safeHeader_wms";
import Root from "@/components/Root.vue";
import { mdiChevronRight, mdiCreditCardScan } from "@mdi/js";
import wms from "@/utils/business_wms";

export default {
  name: "OutboundReview2",
  components: {
    SafeHeader,
    Root,
  },
  data() {
    return {
      docmHeight: document.documentElement.clientHeight,
      showHeight: document.documentElement.clientHeight,
      hidshow: true,
      overlay: false,
      alert: false,
      soMasterCode: "",
      svgpath: mdiChevronRight,
      mdiCreditCardScan: mdiCreditCardScan,
      boxCode: "", // 出库容器号/单号
      pickTaskList: [
        //拣货单列表
        // {
        //   itemCode: "IM21102-918-123",
        //   itemName: "物料名称",
        //   cellCode: "所属库位",
        //   batchName: "批次",
        //   pickQuantity: 110,
        //   boxCode: "CT-1001",
        // },
      ],
      soMasterList: [
        // {
        //   name: 'Frozen Yogurt',
        //   calories: 159,
        // },
        // {
        //   name: 'Ice cream sandwich',
        //   calories: 237,
        // },
        // {
        //   name: 'Eclair',
        //   calories: 262,
        // },
      ],
    };
  },

  mounted() {
    window.onresize = () => {
      return (() => {
        this.showHeight = document.body.clientHeight;
      })();
    };
  },

  watch: {
    showHeight: function () {
      if (this.docmHeight > this.showHeight) {
        this.hidshow = false;
      } else {
        this.hidshow = true;
      }
    },
  },

  methods: {
    // 容器单号查询
    boxCodeSearch() {
      if (!this.boxCode) {
        return;
      }
      //根据这一箱容器查找


      //容器关联的同一个仓管员拣的所有待发容器
      this.overlay = true;

      //根据波次号查询
      wms
        .get({
          url: "/pick/tasks/getBoxesForSend2",
          data: { waveCode: this.boxCode },
        })
        .then((res) => {
          console.log(JSON.stringify(res));
          if (res.status == 200 && res.data.code == 200) {
            this.pickTaskList = res.data.data;
            console.log(JSON.stringify(this.pickTaskList));
            this.overlay = false;
          } else {
            alert(res.data.message);
            this.overlay = false;
          }
        });

      // wms
      //   .get({
      //     url: "/pick/tasks/getBoxesForSend",
      //     data: { boxCode: this.boxCode },
      //   })
      //   .then((res) => {
      //     console.log(JSON.stringify(res));
      //     if (res.status == 200 && res.data.code == 200) {
      //       this.pickTaskList = res.data.data;
      //       console.log(JSON.stringify(this.pickTaskList));
      //       this.overlay = false;
      //     } else {
      //       alert(res.data.message);
      //       this.overlay = false;
      //     }
      //   });
    },
    // 提交

    OutboundSubmit() {
      let pickIds = [];
      if (this.pickTaskList.length == 0) {
        return;
      }
      for (let i = 0; i < this.pickTaskList.length; i++) {
        pickIds.push(this.pickTaskList[i].pickTaskId)
      }
      console.log(pickIds)
      this.overlay = true;
      let params = {
        wareId: localStorage.getItem("wareId"),
        pickIds: pickIds.join(','),
      };
      wms
        .get({
          url: "/wave/details/sendOut",
          data: params,
        })
        .then((res) => {
          console.log(JSON.stringify(res));
          if (res.status == 200 && res.data.code == 200) {
            console.log(res, "res");
            this.overlay = false;
            alert(res.data.data.msg)
            window.location.reload();
          } else {
            alert(res.data.message);
            this.overlay = false;
          }
        });
    },

    // OutboundSubmit() {
    //   this.overlay = true;
    //   let params = {
    //     wareId: localStorage.getItem("wareId"),
    //     billNo: this.soMasterCode,
    //   };
    //   wms
    //     .get({
    //       url: "/so/masters/sendOut",
    //       data: params,
    //     })
    //     .then((res) => {
    //       console.log(JSON.stringify(res));
    //       if (res.status == 200 && res.data.code == 200) {
    //         this.overlay = false;
    //         //
    //         alert("提交成功");
    //         window.location.reload();
    //       } else {
    //         alert(res.data.message);
    //         this.overlay = false;
    //       }
    //     });
    // },

  },
};
</script>

<style lang="scss" scoped>
.footer {
  position: absolute;
  padding-top: 65px;
  width: 100%;
  bottom: 0;
}

#app {
  .row {
    margin: 0;
  }
  .col {
    padding: 0;
  }
}
#OutboundReview2 {
  height: 100%;
  display: flex;
  flex-direction: column;
  .OutboundReview_bottom {
    flex: 1;
    padding-bottom: 35px !important;
  }
}
</style>
